// pages/category/index.js
import {request} from '../../request/index.js'
Page({
    data: {
        // 左侧的菜单数据
        leftMenuList:[],
        // 右侧的商品数据
        rightContent:[],
        // 被点击的左侧的菜单
        currentIndex:0,
        // 右侧内容的滚动条距离顶部的距离
        scrollTop:0
        
    },
    // 接口的返回数据
    Cates:[],
    onLoad(options) {
        // 1.先判断一下本地存储中有没有旧的数据
        // 2.没有旧数据，直接发送新请求
        // 3.有旧的数据，同时旧的数据也没有过期，就使用本地存储中的旧数据即可
        //获取本地存储中的数据
        const Cates=wx.getStorageSync("cates");
        if(!Cates){
            // 不存在，发送请求数据
            this.getCates();
        }else{
            // 有旧的数据,定义过期时间，10s改成五分钟
            if(Date.now()-Cates.tiem>1000*10){
                // 重新发请求
                this.getCates();
            }else{
                // 可以使用的数据
                this.Cates=Cates.data
                let leftMenuList=this.Cates.map(v=>v.cat_name);
                // 构造右侧的商品数据
                let rightContent=this.Cates[0].children;
                this.setData({
                    leftMenuList,
                    rightContent
                })
            }  
        }
    },
    // 获取分类数据
    async getCates(){
        // 1.使用es7的async await来发送请求
        const res=await request({url:'/categories'})
        this.Cates=res;
        // 把接口中的数据存入到本地存储中
        wx.setStorageSync("cates",{time:Date.now(),data:this.Cates})
        // 构造左侧的大菜单数据
        let leftMenuList=this.Cates.map(v=>v.cat_name);
        // 构造右侧的商品数据
        let rightContent=this.Cates[0].children;
        this.setData({
            leftMenuList,
            rightContent
        })
    },
    // 左侧菜单的点击事件
    handleItemTap(e){
        // 1.获取被点击的标题身上的索引
        // 2.给data中的currentIndex赋值就可以了
        // 3.根据不同的索引来渲染右侧的商品内容
        const {index}=e.currentTarget.dataset;
        let rightContent=this.Cates[index].children;
        this.setData({
            currentIndex:index,
            rightContent,
            // 重新设置右侧内容的scroll-view标签的距离顶部的距离
            scrollTop:0
        })
    },
    // 页面上滑，滚动条触底事件
    onReachBottom(){
        console.log('我倒滴啦')
    }
})